<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			bod y{
				width: 100%;
				height: 1000000px;
				background-image: url(img/唐.png);
				background-size: cover; 
				/* 
				 函数 cover  等比例图片      特点：原图按照比例放大存背景空间
				     【开发者：背景图大小是否等于背景空间】
				    contain 等比例缩放图片  特点：图片按照比例缩放存背景空间
					 【开发者：背景图等比例显示在背景空间】
				 */
				/* 背景附件-尺寸中存在cover或者contain */
				background-attachment: fixed;/*背景图固定   scroll 不固定*/
			}
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #ffff00;
				background-image: url(img/唐.png);
				/*问题：超大图-不显示   小图-显示
				  注意：背景空间大小，如果图小于背景空间---平铺
				*/
			   background-repeat: no-repeat; 
			   /*no-repeat不平铺  repeat-x，y 横、纵向平铺*/
			   background-size: 30%;
			   /* 背景尺寸属性值：数值px % |函数 cover contain */
			   /* 背景定位：前提背景空间大于背景图 关键字：center、left、right、top..*/
			   background-position: center top;
			}
			
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse ipsum voluptate error harum officiis, quidem nulla eaque magni odio odit! Mollitia, iste? Sunt tenetur soluta sapiente sequi, animi inventore quam.
		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur saepe, natus ipsa deserunt corporis alias recusandae harum cumque iste beatae ducimus officia! Incidunt totam cupiditate, asperiores harum ut eveniet molestias.
		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi ad illo laboriosam inventore aut minima sit! Perferendis, dolorum magni delectus minus iste maxime quod sunt voluptates magnam error quo veritatis!
		<!-- html img图片 引入一张图片，位置不可随意改变
		     css 背景图  引入一张图片，位置可以随意改变
			 子属性 background-color 背景颜色
			       background-image 背景图
				   background-repeat 背景重复
				   background-size   背景尺寸
				   background-attachment 背景附件
				   background-position   背景定位
				 
			 复合属性 background: background-image  background-color  background-repeat
			  background-size background-attachment background-position 替代子属性
			  
			  简写属性 background：background-image background-position |background-size background-repeat
			  替代子属性 background-image background-color  background-repeat
		 -->
		 <div>
			 
		 </div>
	</body>
</html>